<!--ota任务具体详情-->
<template>
  <div class="device-log">
    <div class="header">
      <div class="title">ota任务具体详情</div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      size="medium"
      :header-cell-style="{ background: '#F5F6F7' }"
    >
      <el-table-column label="产品ID">
        <template slot-scope="scope">
          {{ scope.row.productId || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="设备id">
        <template slot-scope="scope">
          {{ scope.row.deviceId || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="设备uuid">
        <template slot-scope="scope">
          {{ scope.row.deviceUuid || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="设备类型">
        <template slot-scope="scope">
          {{ scope.row.deviceType ? '子设备' : '网关设备' || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="设备名称">
        <template slot-scope="scope">
          {{ scope.row.deviceName || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="任务类型">
        <template slot-scope="scope">
          {{ scope.row.type === 1 ? '升级任务' : '测试任务' || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="任务失败原因">
        <template slot-scope="scope">
          {{ scope.row.failureReason || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="任务执行状态">
        <template slot-scope="scope">
          {{ taskState(scope.row.state) || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="设备当前固件版本	">
        <template slot-scope="scope">
          {{ scope.row.sourceVersion || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="升级版本">
        <template slot-scope="scope">
          {{ scope.row.targetVersion || "-" }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import { getTaskExecutionRecord } from "@/api/product/product-details"
export default {
  name: 'taskExecutionRecord',
  data() {
    return {
      deviceUuid: '', // 设备UUID
      dataValue: '', // 存储选择的日期范围
      tableData: [], // 列表数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0, // 列表数据总条数
      loading: true,
      taskId: ''
    }
  },
  created() {
    this.taskId = this.$route.query.taskId
    // debugger
    this.getTaskRecord()
  },
  methods: {
    // 获取执行ota任务具体详情
    getTaskRecord() {
      this.loading = true
      const params = {
        taskId: this.taskId,
        size: this.pageSize,
        current: this.currentPage
      }
      getTaskExecutionRecord(params).then((res) => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch((err) => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.getTaskRecord()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTaskRecord()
    },
    taskState(state) {
      const stateMap = {
        '-2': '未开始',
        '-1': '排队中',
        '0': '进行中',
        '1': '成功',
        '2': '失败',
        '3': '终止'
      }
      return stateMap[state] || '未知状态'
    }
  }
}
</script>
<style lang="scss" scoped>
.device-log {
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    margin-bottom: 17px;

    .title {
      font-size: 18px;
      font-weight: 600;
      color: #252525;
    }
  }
}
</style>
